<template>
    <div class="expertsDiv">
      <ul class="mui-table-view"
          v-infinite-scroll="loadMore"
        infinite-scroll-disabled="moreLoading"
        infinite-scroll-distance="20">
        <li v-for="expert in experts" @click="showExpert(expert)">
          <div class="imgDiv">
            <img :src="getImgUrl(expert.imgsrc)">
          </div>
          <div class="expertName">
            {{expert.name}}
          </div>
        </li>
        <!--底部判断是加载图标还是提示“全部加载”-->
        <li class="more_loading" v-show="!queryLoading" style="width: 100%;height:100px
" >
          <mt-spinner type="snake" color="#00ccff" :size="20" v-show="moreLoading&&!allLoaded"></mt-spinner>
          <span v-show="allLoaded&&showDownLine">我还是有底线，你已经看到了我的底线</span>
        </li>
      </ul>
    </div>
</template>

<script>
  import api from "../../../../axios/api"
  export default {
    name: "Experts",
    data() {
      return {
        experts : [],//总的专家集合
        currentPage : 1,
        //新查询到的专家集合，也就是下一页
        currentExperts:[],
        initialloading: true,
        queryLoading: false,
        moreLoading: false,//允许无限滚动加载
        totalNum: 0,
        wrapperHeight: 0,
        pageSize: 20,
        pageCount :0,
        allLoaded : false, //是否已全部加载 默认不允许
        showDownLine : false
      }
    },
    methods: {
      getExperts: function (currPage) {
        if (currPage != null) {
          this.currentPage = currPage;
        }
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/experts?currPage="+this.currentPage+"&pageSize=8", null, "get")
          .then(dto => {

            this.currentExperts = dto.tList;
            for (let i = 0; i < this.currentExperts.length; i++) {
              this.experts.push(this.currentExperts[i]);//把当前的专家集合中的专家都添加到总的专家集合
            }
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      getImgUrl: function (imgsrc) {
        return "../../../static/images/experts/" + imgsrc;
      },
      loadMore() {
        if (this.allLoaded) {
          this.showDownLine = true;
        }else{
          this.moreLoading = !this.queryLoading;//是否查询加载取反 设置是否无限加载
          this.currentPage++;//因为页面一打开就是第一页，只要滚动触发加载 以先加到2
         // if(this.currentPage<=this.pageCount) {
            this.getExperts(this.currentPage);
         // }
          setTimeout(() => {
            if(this.currentPage<=this.pageCount){

              for (let i = 0; i < this.currentExperts.length; i++) {
                this.experts.push(this.currentExperts[i]);//把当前的专家集合中的专家都添加到总的专家集合
              }
              this.allLoaded = false;
            }else{
              this.allLoaded = true;
            }
            this.moreLoading = false;
          }, 2500);
        }

      },
      showExpert(expert){
        //console.log(expert.eid)
        this.$router.push({
          name:"Expert",//这个name就是你刚刚配置在router里边的name
          params: {
            eid: expert.eid
          }
        });
      }
    },
    created() {
      this.getExperts();
     // console.log(this.$route.name);
      if (this.$route.name=='Home') {
        this.allLoaded = true;
      }
    },
    mounted() {
      let windowWidth = document.documentElement.clientWidth;//获取屏幕高度
      if(windowWidth>768){//这里根据自己的实际情况设置容器的高度
        this.wrapperHeight = document.documentElement.clientHeight - 105;
      }else{
        this.wrapperHeight = document.documentElement.clientHeight - 80;
      }
    }
  }
</script>

<style scoped>
  .expertsDiv{height: 660px;overflow-y:auto;}
  .expertsDiv ul{margin: 0;padding: 0;height: 660px}
  .expertsDiv ul > li {list-style-type: none;float:left;width: 40%;padding: 0px 17px;}
  .imgDiv{width: 100%;
    height: 120px;}
  .imgDiv img{
    width: 100%;
    height: 100%;
  }
  .expertName{
    height:40px;
    padding: 2px;
    font-family: "微软雅黑";
    font-size: 16px;
    text-align: center;
  }


</style>
